import {
  ExpertAddress,
  ExpertDefAddress,
  ExpertDelAddress,
} from '@/api/expert';
import { Button, Checkbox, Icon, Tag } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRequest } from 'taro-hooks';
import useEdit from './components/useEdit';

export default function Page() {
  const { renderNode: renderEditAddressNode, open: openEdit } = useEdit({
    onSuccess: function () {
      refresh();
    },
  });
  const { data: list, refresh } = useRequest(ExpertAddress);
  const { runAsync: runAddressDef } = useRequest(ExpertDefAddress, {
    manual: true,
  });
  const { runAsync: runAddressDel } = useRequest(ExpertDelAddress, {
    manual: true,
  });

  return (
    <>
      {list?.map((item) => (
        <View key={item.id} className='mx-4 mt-4'>
          <View className=' bg-white rounded-lg px-4 py-3  text-lg font-bold text-black flex items-start'>
            <View
              className='w-[40px] h-[40px] bg-cover mr-1'
              style={{
                backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-address.svg)`,
              }}
            />

            <View className=' flex-1'>
              {item.area} {item.address}
              {!item.user_id && (
                <Tag className=' text-xs py-1 ml-2'>系统地址</Tag>
              )}
            </View>

            {/* 编辑 */}
            {item.user_id && (
              <View
                onClick={() => {
                  openEdit({ detail: item });
                }}
                className='w-[44px] h-[44px] bg-cover'
                style={{
                  backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-edit.svg)`,
                }}
              />
            )}
          </View>
          <View className=' bg-[#F9FBFC] rounded-lg px-4 py-3 flex text-xs text-gary4'>
            <Checkbox
              onChange={async (e) => {
                await runAddressDef({
                  id: item.id,
                });

                refresh();
                Taro.showToast({ title: '设置成功' });
              }}
              value={item.def}
              shape='square'
              iconSize={22}
              className=' -mr-1 -mt-[3px]'
            />
            <Text className=' mr-auto'>默认地址</Text>
            {item.user_id && (
              <View
                className=' ml-auto'
                onClick={async () => {
                  Taro.showModal({
                    title: '确认删除？',
                    content: '是否确认要删除该地址?',
                    success: async ({ confirm }) => {
                      if (!confirm) return;
                      await runAddressDel({
                        id: item.id,
                      });

                      Taro.showToast({ title: '已删除' });
                      refresh();
                    },
                  });
                }}
              >
                <Icon name='delete-o' className=' align-[-2px] mr-1' />
                删除
              </View>
            )}
          </View>
        </View>
      ))}

      <View className=' fixed  left-4 right-4 bottom-4'>
        <Button type='primary' block onClick={() => openEdit()}>
          添加新地址
        </Button>
      </View>

      {renderEditAddressNode()}
    </>
  );
}
